<template>
  <Collapse default-active-key="1" ghost :class="$style.group">
    <template #expandIcon="{ isActive }">
      <CaretUpOutlined :rotate="isActive ? 180 : 90" />
    </template>
    <CollapsePanel key="1">
      <template #header
        >{{ field.label }}
        <span :class="$style.tip" v-if="field.extra?.labelTip">{{
          field.extra.labelTip
        }}</span></template
      >
      <template v-if="field.children">
        <component
          v-for="f in field.children"
          :is="DiFormContext.getItemWidget(f)"
          :key="f.prop"
          :field="f"
          :path="path.concat(f.type === 'layout' ? [] : f.prop)"
        />
      </template>
    </CollapsePanel>
  </Collapse>
</template>
<script setup lang="ts">
import { CaretUpOutlined } from '@ant-design/icons-vue';
import { Collapse, CollapsePanel } from 'ant-design-vue';
import { inject } from 'vue';

const DiFormContext: any = inject('DiFormContext');
withDefaults(
  defineProps<{
    field: any;
    path: string[];
  }>(),
  {}
);
</script>
<style module lang="scss">
.group {
  width: 100%;
  &:global(div.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
    font-size: 16px;
    padding-left: 0;
  }
  &:global(div.ant-collapse .ant-collapse-content > .ant-collapse-content-box) {
    padding: 0 !important;
  }
}
.tip {
  font-size: 14px;
  line-height: 14px;
  color: var(--text-light-gray);
  font-weight: normal;
  margin-left: 16px;
  position: relative;
  padding-left: 16px;
  display: inline-block;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    height: 10px;
    width: 1px;
    background-color: var(--border-color);
  }
}
</style>
